<template>
    <div class="page-report">
        <page-bar>
            <div slot="middle" class="page-title">投诉</div>
            <i slot="right"></i>
        </page-bar>
        <transition name="page-slide" mode="out-in">
            <div v-if="!isDone" key="edit">
                <div class="header">
                    请选择投诉的原因
                </div>
                <div class="list">
                    <a href="javascript:;"  @click="form.item = item" :class="{'on':form.item.id === item.id}" v-for="item in list" :key="item.id">
                        {{item.name}}
                        <i class="uicon uicon-choose"></i>
                    </a>
                </div>
                <a href="javascript:;" class="submit" :class="{'disabled':formStatus||posting}" @click="submit">{{posting ? '正在提交' : '提交'}}</a>
            </div>
            <div class="report-done" v-else key="save">
                <i class="uicon uicon-report-done"></i>
                <p class="tit">你的投诉已提交</p>
                <p>感谢你的反馈，我们会在24小时内完成审核，</p>
                <p>并通过系统消息告诉你结果。</p>
                <p>你可以在我的页卡，<a href="javascript:;" @click="toMsgCenter">消息中心</a>查看</p>

                <a href="javascript:;" @click="reportDone" class="done">确定</a>
            </div>
        </transition>
    </div>
</template>
<script>
import pageBar from "@/components/pagebar.vue";
import scrollFixed from "@/components/scrollFixed.vue";

const SOURCE = {
    news: [
        {
            id: 0,
            name: "色情低俗"
        },
        {
            id: 1,
            name: "产品质量"
        },
        {
            id: 2,
            name: "假冒品牌"
        },
        {
            id: 3,
            name: "虚假广告"
        },
        {
            id: 4,
            name: "诈骗"
        },
        {
            id: 5,
            name: "其他"
        }
    ],
    comment: [
        {
            id: 1,
            name: "淫秽色情"
        },
        {
            id: 2,
            name: "违法信息"
        },
        {
            id: 3,
            name: "营销广告"
        },
        {
            id: 4,
            name: "恶意攻击谩骂"
        }
    ],
    user: [
        {
            id: 1,
            name: "淫秽色情"
        },
        {
            id: 2,
            name: "违法信息"
        },
        {
            id: 3,
            name: "营销广告"
        },
        {
            id: 4,
            name: "恶意攻击谩骂"
        }
    ]
};

export default {
    name: "square-report",
    components: {
        [pageBar.name]: pageBar,
        [scrollFixed.name]: scrollFixed
    },
    data() {
        return {
            isDone: false,
            posting: false,
            form: {
                item: {
                    id: "",
                    name: ""
                }
            },
            list: []
        };
    },
    computed: {
        formStatus() {
            return this.form.item.name === "";
        }
    },
    mounted() {
        if(!this.$route.query.id){
            this.$toast('参数有误');
            history.back();
        }
        this.list = SOURCE["news"];
    },
    methods: {
        reportDone(){
            history.back();
        },
        toMsgCenter() {
            location.href = this.$config.pages.message;
        },
        submit() {
            if (this.formStatus) {
                this.$toast("请选择投诉的原因");
                return false;
            }
            this.postData();
        },
        postData() {
            this.posting = true;
            let url, params;

            url = "?ct=member_publish&ac=complaint";
            params = {
                id: this.$route.query.id,
                content: this.form.item.name
            };

            return this.$http
                .post(url, params)
                .then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        this.isDone = true;
                    } else {
                        this.$toast(data.msg);
                    }
                })
                .catch(e => {
                    window.$zEvent.$emit("ERROR", e);
                    this.$toast(e);
                })
                .finally(() => {
                    this.posting = false;
                });
        }
    }
};
</script>
<style lang="less">
.page-report {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f6f6f6;
    .page-bar {
        background-color: #fff;
    }
    .page-title {
        color: #282828;
        font-size: 36px;
    }
    .header {
        font-size: 28px;
        color: #c6c6c6;
        height: 60px;
        line-height: 60px;
    }
    .list,
    .header {
        padding: 0 30px;
    }
    .list {
        border-top: 1px solid #efefef;
        background-color: #fff;

        a {
            transition: color 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 88px;
            color: #282828;
            font-size: 34px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            i {
                opacity: 0;
                transition: opacity 0.2s;
            }
            &.on {
                color: #e64a19;

                i {
                    opacity: 1;
                }
            }
            & + a {
                border-top: 1px solid #e3e3e3;
            }
        }
    }

    .submit,
    .done {
        margin: 50px 30px 0;
        display: block;
        text-align: center;
        line-height: 88px;
        height: 88px;
        font-size: 36px;
        color: #fff;
        border-radius: 8px;
        background-color: #e64a19;

        &.disabled {
            opacity: 0.8;
        }
    }

    .report-done {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 158px 30px 30px;

        .tit {
            margin-top: 66px;
            margin-bottom: 30px;
            font-size: 36px;
            color: #282828;
        }
        p {
            margin-bottom: 20px;
            line-height: 1;
            font-size: 32px;
            color: #666;

            a {
                color: #e64a19;
            }
        }
        .done {
            margin-top: 70px;
            width: 100%;
        }
    }
}
</style>